<% app_lifecycle_open_icon_selector =
  ".marketing__header__bar__links > #app-lifecycle > .marketing__header__bar__links__link__open_icon"

app_lifecycle_close_icon_selector =
  ".marketing__header__bar__links > #app-lifecycle > .marketing__header__bar__links__link__close_icon"

app_lifecycle_dropdown_selector = ".marketing__header__bar__links > #app-lifecycle"

developers_open_icon_selector =
  ".marketing__header__bar__links > #developers > .marketing__header__bar__links__link__open_icon"

developers_close_icon_selector =
  ".marketing__header__bar__links > #developers > .marketing__header__bar__links__link__close_icon"

developers_dropdown_selector = ".marketing__header__bar__links > #developers"

reset_dopdowns_state_js =
  %JS{}
  # App Lifecycle
  |> JS.hide(to: ".marketing__header__bar__features")
  |> JS.hide(to: app_lifecycle_close_icon_selector)
  |> JS.show(to: app_lifecycle_open_icon_selector)
  |> JS.set_attribute({"aria-expanded", "false"}, to: app_lifecycle_dropdown_selector)
  # Developers
  |> JS.hide(to: ".marketing__header__bar__developers")
  |> JS.hide(to: developers_close_icon_selector)
  |> JS.show(to: developers_open_icon_selector)
  |> JS.set_attribute({"aria-expanded", "false"}, to: developers_dropdown_selector) %>

<% show_app_lifecycle_js =
  reset_dopdowns_state_js
  |> JS.toggle(to: ".marketing__header__bar__features", display: "grid")
  |> JS.toggle(to: app_lifecycle_open_icon_selector)
  |> JS.toggle(to: app_lifecycle_close_icon_selector)
  |> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: app_lifecycle_dropdown_selector) %>

<% show_developers_js =
  reset_dopdowns_state_js
  |> JS.hide(to: ".marketing__header__bar__features")
  |> JS.toggle(to: ".marketing__header__bar__developers", display: "grid")
  |> JS.toggle(to: developers_open_icon_selector)
  |> JS.toggle(to: developers_close_icon_selector)
  |> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: developers_dropdown_selector) %>

<header class="marketing__header">
  <div class="marketing__header__bar">
    <div class="marketing__header__bar__title">
      <.link href="/" class="marketing__header__bar__title__link">
        <img
          class="marketing__header__bar__title__link__logo"
          src="/images/tuist_logo_32x32@2x.png"
          alt={dgettext("marketing", "Tuist Icon")}
        />
        <h2 class="marketing__header__bar__title__link__text">
          Tuist
        </h2>
      </.link>
    </div>

    <nav class="marketing__header__bar__links">
      <.link
        class="marketing__header__bar__links__link"
        id="app-lifecycle"
        aria-expanded="false"
        aria-haspopup="true"
        phx-click={show_app_lifecycle_js}
      >
        {dgettext("marketing", "Features")}
        <.icon_plus size={15} class="marketing__header__bar__links__link__open_icon" />
        <.icon_minus size={15} class="marketing__header__bar__links__link__close_icon" />
      </.link>
      <.link
        class="marketing__header__bar__links__link"
        id="developers"
        aria-expanded="false"
        aria-haspopup="true"
        phx-click={show_developers_js}
      >
        {dgettext("marketing", "Developers")}
        <.icon_plus size={15} class="marketing__header__bar__links__link__open_icon" />
        <.icon_minus size={15} class="marketing__header__bar__links__link__close_icon" />
      </.link>
      <.link href={~p"/pricing"} class="marketing__header__bar__links__link">
        {dgettext("marketing", "Pricing")}
      </.link>
      <.link href={~p"/blog"} class="marketing__header__bar__links__link">
        {dgettext("marketing", "Blog")}
      </.link>
    </nav>

    <% {cta_text, cta_href} =
      if is_nil(TuistWeb.Authentication.current_user(assigns)) do
        {dgettext("marketing", "Log in"), ~p"/users/log_in"}
      else
        {dgettext("marketing", "Dashboard"),
         TuistWeb.Authentication.signed_in_path(TuistWeb.Authentication.current_user(assigns))}
      end %>
    <.primary_button class="marketing__header__bar__cta" size="small" href={cta_href}>
      {cta_text}
    </.primary_button>

    <button
      class="marketing__header__menu__button"
      phx-click={
        JS.toggle(to: ".marketing__header__bar__mobile__menu")
        |> JS.toggle_attribute({"data-scrollable", "true", "false"}, to: "body")
      }
    >
      <.menu_icon />
    </button>
  </div>
  <!-- Mobile Menu -->
  <nav class="marketing__header__bar__mobile__menu" aria-label="Mobile Navigation">
    <div class="marketing__header__bar__mobile__menu__header">
      <div class="marketing__header__bar__mobile__menu__header__title">
        <img
          class="marketing__header__bar__mobile__menu__header__title__logo"
          src="/images/tuist_logo_32x32@2x.png"
          alt={dgettext("marketing", "Tuist Icon")}
        />
        <h2 class="marketing__header__bar__mobile__menu__header__title__text">
          Tuist
        </h2>
      </div>
      <button
        class="marketing__header__bar__mobile__menu__header__close"
        aria-label={dgettext("marketing", "Close menu")}
        phx-click={
          JS.toggle(to: ".marketing__header__bar__mobile__menu")
          |> JS.toggle_attribute({"data-scrollable", "true", "false"}, to: "body")
        }
      >
        <TuistWeb.Marketing.MarketingIcons.close_icon class="marketing__header__bar__mobile__menu__header__close" />
      </button>
    </div>
    <div class="marketing__header__bar__mobile__menu__main">
      <.marketing_mobile_menu_dropdown
        key="app-lifecycle"
        current_path={@current_path}
        title={dgettext("marketing", "Features")}
        children={[
          %{
            title: dgettext("marketing", "Generated Projects"),
            href: Tuist.Environment.get_url(:feature_generated_projects)
          },
          %{
            title: dgettext("marketing", "Cache"),
            href: Tuist.Environment.get_url(:feature_cache)
          },
          %{
            title: dgettext("marketing", "Previews"),
            href: Tuist.Environment.get_url(:feature_previews)
          },
          %{
            title: dgettext("marketing", "Insights"),
            href: Tuist.Environment.get_url(:feature_insights)
          }
        ]}
      />
      <.marketing_mobile_menu_dropdown
        key="developers"
        current_path={@current_path}
        title={dgettext("marketing", "Developers")}
        children={[
          %{
            title: dgettext("marketing", "Docs"),
            href: Tuist.Environment.get_url(:documentation)
          },
          %{title: dgettext("marketing", "Changelog"), href: ~p"/changelog"},
          %{
            title: dgettext("marketing", "Forum"),
            href: Tuist.Environment.get_url(:forum)
          },
          %{
            title: dgettext("marketing", "Slack"),
            href: Tuist.Environment.get_url(:slack)
          },
          %{
            title: dgettext("marketing", "GitHub"),
            href: Tuist.Environment.get_url(:github)
          }
        ]}
      />
      <.marketing_mobile_menu_dropdown
        key="pricing"
        current_path={@current_path}
        title={dgettext("marketing", "Pricing")}
        href={~p"/pricing"}
      />
      <.marketing_mobile_menu_dropdown
        key="title"
        current_path={@current_path}
        title={dgettext("marketing", "Blog")}
        href={~p"/blog"}
      />

      <div class="marketing__header__bar__mobile__menu__main__footer">
        <% {cta_text, _cta_href} =
          if is_nil(TuistWeb.Authentication.current_user(assigns)) do
            {dgettext("marketing", "Log in"), ~p"/users/log_in"}
          else
            {dgettext("marketing", "Dashboard"),
             TuistWeb.Authentication.signed_in_path(TuistWeb.Authentication.current_user(assigns))}
          end %>

        <.primary_button
          class="marketing__header__bar__cta"
          href={Tuist.Environment.get_url(:get_started)}
          size="medium"
        >
          {cta_text}
        </.primary_button>

        <div class="marketing__header__bar__mobile__menu__main__footer__links">
          <div class="marketing__header__bar__mobile__menu__main__footer__links__header">
            {dgettext("marketing", "Stay in touch")}
          </div>
          <div class="marketing__header__bar__mobile__menu__main__footer__links__main">
            <nav
              class="marketing__header__bar__mobile__menu__main__footer__links__main__social"
              aria-label={dgettext("marketing", "Social Media Links")}
            >
              <.link href={Tuist.Environment.get_url(:slack)} target="_blank">
                <.icon_slack class="marketing__header__bar__mobile__menu__main__footer__links__main__social__icon" />
              </.link>
              <.link href={Tuist.Environment.get_url(:bluesky)} target="_blank">
                <.icon_bluesky class="marketing__header__bar__mobile__menu__main__footer__links__main__social__icon" />
              </.link>
              <.link href={Tuist.Environment.get_url(:github)} target="_blank">
                <.icon_github class="marketing__header__bar__mobile__menu__main__footer__links__main__social__icon" />
              </.link>
              <.link href={Tuist.Environment.get_url(:mastodon)} target="_blank">
                <.icon_mastodon class="marketing__header__bar__mobile__menu__main__footer__links__main__social__icon" />
              </.link>
              <.link href={Tuist.Environment.get_url(:peertube)} target="_blank">
                <.icon_peertube class="marketing__header__bar__mobile__menu__main__footer__links__main__social__icon" />
              </.link>
              <.link href={Tuist.Environment.get_url(:linkedin)} target="_blank">
                <.icon_linkedin class="marketing__header__bar__mobile__menu__main__footer__links__main__social__icon" />
              </.link>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <!-- Features Menu -->
  <nav class="marketing__header__bar__features" aria-labelledby="app-lifecycle">
    <.link
      class="marketing__header__bar__features__phase"
      href={Tuist.Environment.get_url(:feature_generated_projects)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__features__phase__title">
        {dgettext("marketing", "Generated projects")}
      </h2>
      <p class="marketing__header__bar__features__phase__description">
        {dgettext("marketing", "Make modular Xcode projects more manageable")}
      </p>
      <.feature_generated_projects_artwork />
    </.link>

    <.link
      class="marketing__header__bar__features__phase"
      href={Tuist.Environment.get_url(:feature_cache)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__features__phase__title">
        {dgettext("marketing", "Cache")}
      </h2>
      <p class="marketing__header__bar__features__phase__description">
        {dgettext("marketing", "Speed up your builds and test runs.")}
      </p>
      <.feature_cache_artwork />
    </.link>
    <.link
      class="marketing__header__bar__features__phase"
      href={Tuist.Environment.get_url(:feature_previews)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__features__phase__title">
        {dgettext("marketing", "Previews")}
      </h2>
      <p class="marketing__header__bar__features__phase__description">
        {dgettext("marketing", "Effortlessly share your app with a single URL.")}
      </p>
      <.feature_previews_artwork />
    </.link>

    <.link
      class="marketing__header__bar__features__phase"
      href={Tuist.Environment.get_url(:feature_insights)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__features__phase__title">
        {dgettext("marketing", "Insights")}
      </h2>
      <p class="marketing__header__bar__features__phase__description">
        {dgettext("marketing", "Enhance your development environment with actionable insights.")}
      </p>
      <.feature_insights_artwork />
    </.link>
  </nav>
  <!-- Developers Menu -->
  <nav class="marketing__header__bar__developers" aria-labelledby="app-lifecycle">
    <.link
      class="marketing__header__bar__developers__phase"
      href={Tuist.Environment.get_url(:documentation)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__developers__phase__title">
        {dgettext("marketing", "Docs")}
      </h2>
      <p class="marketing__header__bar__developers__phase__description">
        {dgettext(
          "marketing",
          "Explore our documentation—your go-to guide for mastering all things."
        )}
      </p>

      <.developers_docs_artwork style="grid-area: span 2;" />
    </.link>

    <.link class="marketing__header__bar__developers__phase" href={~p"/changelog"}>
      <h2 class="marketing__header__bar__developers__phase__title">
        {dgettext("marketing", "Changelog")}
      </h2>
      <p class="marketing__header__bar__developers__phase__description">
        {dgettext("marketing", "Keep up with the latest and greatest changes in Tuist.")}
      </p>
    </.link>

    <.link
      class="marketing__header__bar__developers__phase"
      href={Tuist.Environment.get_url(:forum)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__developers__phase__title">
        {dgettext("marketing", "Community")}
      </h2>
      <p class="marketing__header__bar__developers__phase__description">
        {dgettext(
          "marketing",
          "Got ideas or questions? Join the conversation in our community forum."
        )}
      </p>
    </.link>

    <.link
      class="marketing__header__bar__developers__phase"
      href={Tuist.Environment.get_url(:slack)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__developers__phase__title">
        {dgettext("marketing", "Slack")}
      </h2>

      <p class="marketing__header__bar__developers__phase__description">
        {dgettext(
          "marketing",
          "Join our Slack group for real-time conversations and to connect with the Tuist community"
        )}
      </p>
    </.link>

    <.link
      class="marketing__header__bar__developers__phase"
      href={Tuist.Environment.get_url(:github)}
      target="_blank"
    >
      <h2 class="marketing__header__bar__developers__phase__title">
        {dgettext("marketing", "GitHub")}
      </h2>
      <p class="marketing__header__bar__developers__phase__description">
        {dgettext(
          "marketing",
          "Check out our GitHub to see all the action—where the magic happens and collaboration thrives."
        )}
      </p>
    </.link>
  </nav>
</header>
